<template>
    <page-view>
        <NavBar title="朋友圈" class="nav-bar"></NavBar>
        <div v-if="isLoading" class="flex flex-row justify-center items-center mt-[50px]">
            <Loading color="#1989fa">加载中</Loading>
        </div>
        <Swipe
            v-else
            :initial-swipe="currentIndex"
            class="w-full h-full"
            vertical
            @change="swiperChange"
            :loop="false"
            :show-indicators="false"
            ref="videoSwipe">
            <template v-for="(item, index) in allVideoList" :key="item.filename">
                <SwipeItem class="relative">
                    <template v-if="index === currentIndex || currentIndex - 1 === index || currentIndex + 1 === index">
                        <img :src="VIDEO_BASE_URL + item.fileImagePath"
                            class="w-full h-full object-cover absolute -z-10 filter blur-[30px]" />
                        <video class="w-full h-full object-contain"
                            :src="currentIndex === index ? VIDEO_BASE_URL + item.filepath : null"
                            :poster="VIDEO_BASE_URL + item.fileImagePath"
                            controls
                            :autoplay="currentIndex === index"></video>
                    </template>
                </SwipeItem>
            </template>
        </Swipe>
    </page-view>
</template>
<script setup>
import { NavBar, Swipe, SwipeItem, Image, Loading } from 'vant';
import axios from 'axios';
import { ref } from 'vue';
import { computed } from 'vue';
import videoInfoStore from "@/store/videoInfoStore";
import { watch } from 'vue';
import { onMounted } from 'vue';
const _videoInfoStore = videoInfoStore();

const allVideoList = ref([]);
const currentIndex = ref(0);

const VIDEO_BASE_URL = "http://www.softeem.xin:8888";
const isLoading = ref(false);
const getVideoList = () => {
    isLoading.value = true;
    axios.get(`http://www.softeem.xin:8888/DS918/getVideoList`)
        .then(resp => {
            allVideoList.value = resp.data.data;
        }).catch(error => {

        }).finally(() => {
            isLoading.value = false;
        });
}
getVideoList();

const videoSwipe = ref(null);
const swiperChange = (index) => {
    currentIndex.value = index;
}

watch(currentIndex, (newValue, oldValue) => {
    _videoInfoStore.setCurrentIndex(newValue);
});

onMounted(() => {
    currentIndex.value = _videoInfoStore.currentIndex;
});

</script>
<style scoped lang="scss">
.nav-bar {
    --van-border-width: 0;
    @apply fixed w-full top-0 bg-transparent;

    :deep(.van-nav-bar__content) {

        @apply bg-transparent;

        .van-nav-bar__title {
            @apply text-white;
        }

    }
}
</style>